<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="renderer" content="webkit">
    <title>登录</title>
    <link rel="stylesheet" href="/css/pintuer.css">
    <link rel="stylesheet" href="/css/admin.css">
    <style>
        /**{*/
        /*    padding: 0;*/
        /*    margin:0;*/
        /*}*/
        /*body{*/
        /*    width: 100%;*/
        /*    height:100%;*/
        /*    background: #fff;*/
        /*}*/
        .toggleModal {
            padding: 10px 20px;
            color: white;
            background: #409EFF;
            border: none;
            box-shadow: 2px 3px 20px rgba(0, 0, 0, 0.2);
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .mask {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            z-index: 100;
            display: none;
        }

        .modal {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 400px;
            transform: translate(-50%, -50%);
            border-radius: 5px;
            background: #fff;
            box-shadow: 2px 3px 20px rgba(0, 0, 0, 0.2);
            z-index: 120;
            display: none;
        }

        .modal .modal-header {
            height: 50px;
            border-bottom: 1px solid #f5f5f5;
            padding: 0 15px;
        }

        .modal .modal-header p {
            line-height: 50px;
            display: inline-block;
        }

        .modal .modal-header .title {
            font-size: 18px;
            color: #333;
        }

        .modal .modal-header .close {
            float: right;
            font-size: 26px;
            margin-top: -2px;
            color: #9C9FA4;
            cursor: default;
        }

        .modal .modal-content {
            min-height: 100px;
        }

        .modal .modal-footer .btn {
            padding: 0 20px;
            height: 36px;
            line-height: 36px;
            color: white;
            background: #409EFF;
            border: none;
        }

        .modal .modal-footer {
            border-top: 1px solid #f5f5f5;
            padding: 15px;
            text-align: right;

        }

        .container::after {
            content: "";
            display: block;
            clear: both;
        }
    </style>
    <script src="/js/jquery.js"></script>
    <script src="/js/pintuer.js"></script>
    <script src="/js/vuejs-2.5.16.js"></script>
    <script src="/js/axios-0.18.0.js"></script>
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="/element-ui/lib/index.js"></script>
    <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
</head>
<body>
<div class="bg"></div>
<div class="container" id="app">
    <div class="line bouncein">
        <div class="xs6 xm4 xs3-move xm4-move">
            <div style="height:150px;"></div>
            <div class="media media-y margin-big-bottom">
            </div>
            <form>
                <div class="panel loginbox">
                    <div class="text-center margin-big padding-big-top"><h1>探花交友后台管理中心</h1></div>
                    <div class="panel-body" style="padding:30px; padding-bottom:10px; padding-top:10px;">
                        <div class="form-group">
                            <div class="field field-icon-right">
                                <input type="text" class="input input-big" name="username" id="username"
                                       placeholder="请输入账号" v-model="username" onblur="checkName()"/>
                                <span id="usernameSpan"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="field field-icon-right">
                                <input type="text" class="input input-big" name="password" id="password"
                                       placeholder="请输入密码" v-model="password" onblur="checkPwd()"/>
                                <span id="passwordSpan"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="field field-icon-right">
                                <input type="text" class="input input-big" name="verification" id="verification"
                                       placeholder="请输入验证码" v-model="verificationCode" onblur="checkVerification()"/>
                            </div>
                            <span id="verificationSpan"></span>
                        </div>
                        <div>
                            <font>图形验证码：</font><img src="/management/admin/verification"/>
                        </div>
                    </div>
                    <div style="padding:30px;"><input type="button"
                                                      class="button button-block bg-main text-big input-big"
                                                      @click="login()" value="登录">
                    </div>
                </div>
            </form>
            <hr>
            <div style="margin-right: 100px; float: right">
                <p>
                    <span>其他方式登录</span>
                    <img id="toggleModal" style="width: 40px;height: 40px;"
                         src="/images/weixin.png" alt="微信登录">
                </p>
            </div>

        </div>
    </div>
</div>
<div class="container">
    <div>
        <!--        <button class="toggleModal" id="toggleModal">触发遮罩层</button>-->
    </div>
    <div class="modal">
        <!--        <div class="modal-header">-->
        <!--            <p class="title">这是弹出层的标题</p>-->
        <!--            <p class="close">×</p>-->
        <!--        </div>-->
        <div class="modal-content" id="weixin"></div>
        <div class="modal-footer">
            <button class="close btn">关闭</button>
        </div>
    </div>
    <div class="mask"></div>
</div>

<script>
    const app = new Vue({
            el: '#app',
            data: {
                username: "",
                password: "",
                verificationCode: ""
            },
            methods: {
                login() {
                    if (checkName() && checkPwd() && checkVerification()) {
                        axios.post("/management/admin/login", {
                            username: this.username,
                            password: this.password,
                            verificationCode: this.verificationCode
                        }).then(resp => {
                            //将返回的token数据存储到本地存储器
                            localStorage.setItem("Authorization", resp.data);
                            location.href = "/main.html";
                        })
                    }
                }
                ,
            },
            created() {

            }
        })
    ;

</script>

<script type="text/javascript">
    //校验用户名
    function checkName() {
        //获取用户名元素
        let usernameInput = document.querySelector("#username");
        //操作用户名元素
        let enterUsername = usernameInput.value;
        //判断是否为空
        if (enterUsername !== "") {
            //判断是否符合要求:4-7个字母或者数字或者下划线，不能以数字和下划线开头
            let usernameReg = /^[a-zA-Z]\w{3,6}$/;
            let usernameSpan = document.querySelector("#usernameSpan");
            if (usernameReg.test(enterUsername)) {
                //满足需求
                usernameSpan.innerHTML = "<font color='green'>您的用户名可用</font>";
                return true;
            } else {
                //不满足需求
                usernameSpan.innerHTML = "<font color='red'>您的用户名不可用</font>";
                return false;
            }
        } else {
            //不满足需求
            usernameSpan.innerHTML = "<font color='red'>用户名不能为空</font>";
            return false;
        }
    }

    //校验密码
    function checkPwd() {
        //获取密码元素
        let passwordInput = document.querySelector("#password");
        //操作密码元素
        let enterPassword = passwordInput.value;
        //判断是否为空
        if (enterPassword !== "") {
            //判断是否符合要求:6个数字
            let passwordReg = /^\d{6}$/;
            let passwordSpan = document.querySelector("#passwordSpan");
            if (passwordReg.test(enterPassword)) {
                //满足需求
                passwordSpan.innerHTML = "<font color='green'>您的密码可用</font>";
                return true;
            } else {
                //不满足需求
                passwordSpan.innerHTML = "<font color='red'>您的密码不可用</font>";
                return false;
            }
        } else {
            //不满足需求
            passwordSpan.innerHTML = "<font color='red'>密码不能为空</font>";
            return false;
        }
    }

    //校验验证码
    function checkVerification() {
        //获取验证码元素
        let verificationInput = document.querySelector("#verification");
        //操作验证码元素
        let enterVerification = verificationInput.value;
        //判断是否为空
        if (enterVerification !== "") {
            //判断是否符合要求:11位数字，1开头，第二个数字是3，5，7，8，6，9
            let verificationReg = /^[a-zA-Z0-9]{5}$/;
            let verificationSpan = document.querySelector("#verificationSpan");
            if (verificationReg.test(enterVerification)) {
                //满足需求
                verificationSpan.innerHTML = "<font color='green'>您的验证码可用</font>";
                return true;
            } else {
                //不满足需求
                verificationSpan.innerHTML = "<font color='red'>您的验证码不可用</font>";
                return false;
            }
        } else {
            //不满足需求
            verificationSpan.innerHTML = "<font color='red'>验证码不能为空</font>";
            return false;
        }
    }
</script>

<script>
    window.onload = function () {
        // 获取需要使用到的元素
        var toggleModal = document.getElementById("toggleModal");
        var container = document.getElementsByClassName("container")[0];
        var mask = document.getElementsByClassName("mask")[0];
        var modal = document.getElementsByClassName("modal")[0];
        var closes = document.getElementsByClassName("close");
        toggleModal.onclick = show;
        closes[0].onclick = close;
        //closes[1].onclick = close;

        function show() {
            mask.style.display = "block";
            modal.style.display = "block";
        }

        function close() {
            mask.style.display = "none";
            modal.style.display = "none";
        }
    };
    var obj = new WxLogin({
        self_redirect: false,
        id: "weixin",
        appid: "wx3bdb1192c22883f3",
        scope: "snsapi_login",
        redirect_uri: "http://note.java.itcast.cn/management/weixinlogin"
    });
</script>
</body>
</html>